<template>
    <div class="jindu-main">
        <div class="jindu-title">总体进度统计</div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <echarts id="echarts1" :option="option1" :styles="styles1"></echarts>
            </div>
        </div>
        <div class="jindu-title">计划与实际对比分析</div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <echarts id="echarts4" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts5" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts6" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts7" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts8" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts9" :option="option2" :styles="styles1"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts10" :option="option2" :styles="styles1"></echarts>
            </div>
        </div>
    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'

  export default {
    name: 'JinDu',
    data () {
      var colors = ['#7cf317', '#d10eb1', '#4ddbff'];
      return {
        styles1: {
          width: '5rem',
          height: '3rem',
          margin: '0 auto'
        },
        option1: {
          color: ['#5793f3', '#d14a61', '#675bba'],
          angleAxis: {
            type: 'category',
            data: ['桩基', '承台', '墩柱', '盖梁', '支座垫石', '上部主梁', '附属设施'],
            z: -1,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          radiusAxis: {
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          polar: {},
          series: [{
            type: 'bar',
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: 'polar',
            name: '正在施工',
            stack: 'a'
          }, {
            type: 'bar',
            data: [2, 4, 6, 1, 3, 2, 1],
            coordinateSystem: 'polar',
            name: '施工完成',
            stack: 'a'
          }, {
            type: 'bar',
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: 'polar',
            name: '已计量',
            stack: 'a'
          }],
          legend: {
            show: true,
            data: ['正在施工', '施工完成', '已计量'],
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        option2: {
          title: {
            // left: '45%',
            text: '路基工程',
            textStyle: {
              color: '#ffffff',
              align: 'center'
            }
          },
          color: colors,
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            top:'10%',
            data: ['计划进度', '实际进度'],
            textStyle:{
              color:'#fff'
            }
          },
          grid: {
            top: 80,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '实际进度  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12']
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '计划进度  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12']
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[2]
                }
              },
            }
          ],
          series: [
            {
              name: '计划进度',
              type: 'line',
              xAxisIndex: 1,
              // smooth: true,
              data: [3, 4, 6, 20, 28.7, 70.7, 75.6, 82.2, 85.7, 92, 95, 100]
            },
            {
              name: '实际进度',
              type: 'line',
              // smooth: true,
              data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 75.6, 88, 90, 91, 95, 99]
            }
          ]
        }
      }
    },
    components: {
      echarts
    }
  }
</script>